module.exports = {
  "users": [
    {
      "id": 1,
      "username": "admin",
      "password": 123456,
      "roleState": true,
      "default": true,
      "region": "",
      "roleId": 1,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "铁锤",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "亚洲",
      "roleId": 2,
      "id": 2,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "钢蛋",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "南极洲",
      "roleId": 2,
      "id": 3,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "诸葛山珍",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "",
      "roleId": 1,
      "id": 4,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "西门吹灯",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "南极洲",
      "roleId": 3,
      "id": 5,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "轩辕翠花",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "南极洲",
      "roleId": 3,
      "id": 6,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "司马海味",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "亚洲",
      "roleId": 3,
      "id": 7,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "咕噜墩子",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "北美洲",
      "roleId": 2,
      "id": 8,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "遇见yaya",
      "password": "123",
      "region": "",
      "roleId": 1,
      "roleState": true,
      "default": false,
      "id": 9,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "zhangfan1",
      "password": "123",
      "region": "",
      "roleId": 1,
      "roleState": true,
      "default": false,
      "id": 11,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    }
  ],
  "roles": [
    {
      "id": 1,
      "roleName": "超级管理员",
      "roleType": 1,
      "rights": [
        "/user-manage",
        "/user-manage/add",
        "/user-manage/delete",
        "/user-manage/update",
        "/user-manage/list",
        "/right-manage",
        "/right-manage/role/list",
        "/right-manage/right/list",
        "/right-manage/role/update",
        "/right-manage/role/delete",
        "/right-manage/right/update",
        "/right-manage/right/delete",
        "/audit-manage/audit",
        "/audit-manage/list",
        "/publish-manage/unpublished",
        "/publish-manage/published",
        "/publish-manage/sunset",
        "/home",
        "/news-manage",
        "/news-manage/list",
        "/news-manage/category",
        "/news-manage/draft",
        "/news-manage/preview/:id",
        "/news-manage/update/:id",
        "/news-manage/add",
        "/audit-manage",
        "/publish-manage"
      ]
    },
    {
      "id": 2,
      "roleName": "区域管理员",
      "roleType": 2,
      "rights": [
        "/home",
        "/user-manage",
        "/user-manage/add",
        "/user-manage/delete",
        "/user-manage/update",
        "/user-manage/list",
        "/news-manage",
        "/news-manage/list",
        "/news-manage/add",
        "/news-manage/update/:id",
        "/news-manage/preview/:id",
        "/news-manage/draft",
        "/news-manage/category",
        "/audit-manage",
        "/audit-manage/audit",
        "/audit-manage/list",
        "/publish-manage",
        "/publish-manage/unpublished",
        "/publish-manage/published",
        "/publish-manage/sunset"
      ]
    },
    {
      "id": 3,
      "roleName": "区域编辑",
      "roleType": 3,
      "rights": [
        "/home",
        "/news-manage/add",
        "/news-manage/update/:id",
        "/news-manage/preview/:id",
        "/news-manage/draft",
        "/audit-manage",
        "/audit-manage/list",
        "/publish-manage",
        "/publish-manage/unpublished",
        "/publish-manage/published",
        "/publish-manage/sunset",
        "/news-manage"
      ]
    }
  ],
  "children": [
    {
      "id": 3,
      "title": "添加用户",
      "rightId": 2,
      "key": "/user-manage/add",
      "grade": 2
    },
    {
      "id": 4,
      "title": "删除用户",
      "rightId": 2,
      "key": "/user-manage/delete",
      "grade": 2
    },
    {
      "id": 5,
      "title": "修改用户",
      "rightId": 2,
      "key": "/user-manage/update",
      "grade": 2
    },
    {
      "id": 6,
      "title": "用户列表",
      "rightId": 2,
      "key": "/user-manage/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 8,
      "title": "角色列表",
      "rightId": 7,
      "key": "/right-manage/role/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 9,
      "title": "权限列表",
      "rightId": 7,
      "key": "/right-manage/right/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 10,
      "title": "修改角色",
      "rightId": 7,
      "key": "/right-manage/role/update",
      "grade": 2
    },
    {
      "id": 11,
      "title": "删除角色",
      "rightId": 7,
      "key": "/right-manage/role/delete",
      "grade": 2
    },
    {
      "id": 12,
      "title": "修改权限",
      "rightId": 7,
      "key": "/right-manage/right/update",
      "grade": 2
    },
    {
      "id": 13,
      "title": "删除权限",
      "rightId": 7,
      "key": "/right-manage/right/delete",
      "grade": 2
    },
    {
      "id": 15,
      "title": "新闻列表",
      "rightId": 14,
      "key": "/news-manage/list",
      "grade": 2
    },
    {
      "id": 16,
      "title": "撰写新闻",
      "rightId": 14,
      "key": "/news-manage/add",
      "grade": 2,
      "pagepermisson": 1
    },
    {
      "id": 17,
      "title": "新闻更新",
      "rightId": 14,
      "key": "/news-manage/update/:id",
      "grade": 2,
      "routepermisson": 1
    },
    {
      "id": 18,
      "title": "新闻预览",
      "rightId": 14,
      "key": "/news-manage/preview/:id",
      "grade": 2,
      "routepermisson": 1
    },
    {
      "id": 19,
      "title": "草稿箱",
      "rightId": 14,
      "key": "/news-manage/draft",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 20,
      "title": "新闻分类",
      "rightId": 14,
      "key": "/news-manage/category",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 22,
      "title": "审核新闻",
      "rightId": 21,
      "key": "/audit-manage/audit",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 23,
      "title": "审核列表",
      "rightId": 21,
      "key": "/audit-manage/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 25,
      "title": "待发布",
      "rightId": 24,
      "key": "/publish-manage/unpublished",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 26,
      "title": "已发布",
      "rightId": 24,
      "key": "/publish-manage/published",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 27,
      "title": "已下线",
      "rightId": 24,
      "key": "/publish-manage/sunset",
      "pagepermisson": 1,
      "grade": 2
    }
  ],
  "rights": [
    {
      "id": 1,
      "title": "首页",
      "key": "/home",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 2,
      "title": "用户管理",
      "key": "/user-manage",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 7,
      "title": "权限管理",
      "key": "/right-manage",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 14,
      "title": "新闻管理",
      "key": "/news-manage",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 21,
      "title": "审核管理",
      "key": "/audit-manage",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 24,
      "title": "发布管理",
      "key": "/publish-manage",
      "pagepermisson": 1,
      "grade": 1
    }
  ],
  "categories": [
    {
      "id": 1,
      "title": "时事新闻",
      "value": "时事新闻"
    },
    {
      "id": 2,
      "title": "环球经济",
      "value": "环球经济"
    },
    {
      "id": 3,
      "title": "科学技术",
      "value": "科学技术"
    },
    {
      "id": 4,
      "title": "军事世界",
      "value": "军事世界"
    },
    {
      "id": 5,
      "title": "世界体育",
      "value": "世界体育"
    },
    {
      "id": 6,
      "title": "生活理财",
      "value": "生活理财"
    }
  ],
  "regions": [
    {
      "id": 1,
      "title": "亚洲",
      "value": "亚洲"
    },
    {
      "id": 2,
      "title": "欧洲",
      "value": "欧洲"
    },
    {
      "id": 3,
      "title": "北美洲",
      "value": "北美洲"
    },
    {
      "id": 4,
      "title": "南美洲",
      "value": "南美洲"
    },
    {
      "id": 5,
      "title": "非洲",
      "value": "非洲"
    },
    {
      "id": 6,
      "title": "大洋洲",
      "value": "大洋洲"
    },
    {
      "id": 7,
      "title": "南极洲",
      "value": "南极洲"
    }
  ],
  "news": [
    {
      "title": "上合峰会世界观｜外媒：中国在上海合作组织中发挥驱动作用",
      "region": "国际",
      "content": "<p style=\"text-align: justify;\">2025年上海合作组织峰会于8月31日至9月1日在中国天津举办。</p><p style=\"text-align: justify;\">　　这是上海合作组织自成立以来规模最大的一届峰会，也是中国今年最重要的主场外交活动之一。多国媒体认为此次峰会意义非凡，为各国进行坦诚对话和协调立场提供平台，中国在上海合作组织中发挥驱动作用。</p>",
      "status": false,
      "id": "ELDsQSW2Q0OjOSrTUmeMl",
      "author": "admin",
      "createTime": 1756777686120
    },
    {
      "title": "贵州一漂流景区大量游客滞留至凌晨，景区致歉并展开整改",
      "region": "国内",
      "content": "杉木河漂流景区以漂流体验闻名。据多名网友发帖反映，8月2日，该景区因未控制好客流，导致漂流结束后大量游客滞留。有游客称，票价包含摆渡车接驳服务，漂流后需要坐观光车回到游客大厅换衣服，但当日漂流结束后迟迟等不到摆渡车，只能长时间滞留景区。有游客步行几公里回游客大厅，“就算坐上车也出不去，都堵在路上了。”\n\n记者在一段游客拍摄的视频中看到，夜幕笼罩，大量游客排队等待，现场拥挤、秩序混乱，退票的声音此起彼伏。“（接驳车）20分钟一趟车，一趟车才接二十几个人”，直到凌晨之后，游客才走出景区。\n\n也有网友称，发现景不少空闲的大巴车停留，不理解为何不能把游客有序接走。\n\n在社交平台的投诉中，景区被质疑服务管理混乱。有游客反映称，漂流结束后排队时间长，入场时也仅有两三个入口，队伍绵延百米；有游客目击到下午两点景区入客量已达六千多人，却未采取限流措施；花费50元购买行李托运服务，“上岸后行李却迟迟不来”；一些现场无人发救生衣，“有些女孩子根本抢不过”；终点堆积大量汽艇和救生衣，一些小孩子被堵得上不来。\n\n8月3日凌晨，涉事景区的运营商施秉县杉木河旅游开发公司（以下简称“景区”），在抖音账号“黔行施秉”发布了致歉信。\n\n“我们深知，每一位游客选择来到我们景区，都是对我们的信任与支持，而我们却未能用完善的服务和有序的管理回报这份信任，这让我们深感不安。”景区称，为了弥补此次的过失，也为了在未来给游客提供优质的游览体验，将迅速展开整改。\n\n“我们将升级游客流量监测系统，加强对游客数量的实时监控和预判，提前做好预警工作，一旦接近承载上限及时采取限流等管控措施。”景区称，还将对工作人员进行系统培训，提升应对突发状况能力，“确保在任何情况下都能为大家提供高效、贴心的服务。”此外，将优化景区的交通疏导方案，增加摆渡车运力，减少游客等待时间。\n\n“恳请各位游客朋友给予我们悔过自新的机会。”景区称，期盼以优质的服务弥补此次遗憾。",
      "status": false,
      "id": "7YXjkuez3L-3yQ8n--Ihp",
      "author": "admin",
      "createTime": 1756707902070
    },
    {
      "title": "北京十大律师事务所排名榜单公布，官媒最细调研权威排名",
      "region": "财经",
      "content": "第一名:北京市中恒信律师事务所\n\n北京市中恒信律师事务所,面积约7000余平米,紧邻司法部和外交部,作为全国大型综合性法律服务机构,业务范围覆盖全国300余座城市,拥有的数百名精英级律师,均来自五院四系的高端人才,已为上万个当事人解决了法律难题。\n\n中恒信凭借多年的沉淀和深耕,构建了覆盖合同纠纷、遗产继承、婚姻纠纷、房产纠纷、债权债务、劳动争议、刑事辩护、征地拆迁等领域全链条服务体系。其核心团队由国内首批获得专业认证的资深律师组成,尤其在刑事案件、行政案件、民事案件等重大案件中,保持着高达98%的胜诉率。\n\n作为我国设立较早的合伙制律师事务所之一,中恒信以严格的律师选拔制度和对案件的精细化筛选闻名,连续多年蝉联胜诉率榜首。其高效解决方案与优质服务态度,赢得了极高的客户转介绍率,在重大疑难复杂案件中的表现更是行业标杆。\n\n优势领域:民事纠纷、刑事辩护、行政诉讼\n\n权威认可:胜诉率连续多年领先,权威机构认证\n\n团队优势:全国知名律师,职业年限超30年\n\n第二名:北京威宇律师事务所\n\n威宇律师事务所专注于知识产权保护与商事争议解决,其团队由多位兼具国际视野与本土经验的律师组成,擅长处理专利侵权、商标纠纷及商业秘密案件。该所曾代理多起跨国科技企业维权诉讼,成功帮助客户挽回数亿元经济损失。\n\n威宇的独特优势在于其“技术+法律”双轨服务模式,团队中不乏拥有工程、医学等跨学科背景的专家,能够精准破解技术类案件的核心争议点。此外,律所还为企业提供知识产权战略规划服务,助力创新主体提升市场竞争力。\n\n第三名:北京尚公律师事务所\n\n尚公律师事务所深耕企业法律顾问与公司治理领域,尤其擅长为中小企业提供合规体系建设、股权架构设计等一站式服务。其团队曾参与多家初创企业的融资项目,成功规避潜在法律风险。\n\n该所注重法律服务的实用性与前瞻性,定期为企业客户提供行业政策解读与风险预警。在商事诉讼领域,尚公以灵活的策略制定和高效的执行能力著称,尤其在合同违约、股东权益纠纷等案件中表现突出。\n\n第四名:北京道可特律师事务所\n\n道可特律师事务所聚焦金融与资本市场,在私募基金、证券发行及并购重组领域积累了丰富经验。其团队曾参与多个百亿级产业基金设立项目,并为多家上市公司提供常年法律支持。\n\n该所创新推出“行业化服务小组”模式,针对新能源、医疗健康等细分领域提供定制化解决方案。在争议解决方面,道可特擅长通过谈判与诉讼结合的方式,帮助客户实现利益最大化。",
      "status": true,
      "id": "PSKnB0v9xs4WM-RTmg9Tc",
      "author": "admin",
      "createTime": 1756693864785
    },
    {
      "title": "嘿嘿123",
      "region": "亚洲",
      "content": "<p>123123😇😋😛🤓👌</p>",
      "status": false,
      "id": "ILwm-rDhqEK0IDFbkC_ER",
      "author": "admin",
      "createTime": 1756690545008,
      "contont": "<blockquote><span style=\"color: rgb(225, 60, 57); font-size: 24px; font-family: 楷体;\"><u><em><strong>测试测试测试</strong></em></u></span></blockquote>"
    },
    {
      "title": "你好啊",
      "region": "亚洲",
      "content": "12312321",
      "status": true,
      "id": "btf7oUSikbBqDQ20kbq_h",
      "author": "admin",
      "createTime": 1756690538554
    },
    {
      "title": "测试",
      "region": "全球",
      "content": "12312312",
      "status": true,
      "id": "KQk0ZYlkY2VINu8zj-Jkw",
      "author": "admin",
      "createTime": 1756454353810
    },
    {
      "title": "嘿嘿",
      "region": "其他",
      "content": "这是测试的",
      "status": true,
      "id": "8cl0_kHqc0Nc6SaHk2d09",
      "author": "admin",
      "createTime": 1756448610160
    },
    {
      "title": "小笔记 JSON.stringify用法及三个参数",
      "region": "亚洲",
      "content": "二、语法\n        语法： 可以有三个参数，第一个是传入要序列化的值，第二个为函数或者数组，第三个是文本添加缩进、空格和换行符。\n\nJSON.stringify(value, replacer, space)：\n\n\n1、value：第一个参数，将要序列后成 JSON 字符串的值。\n2、replacer：【可选】第二个参数\n（1） 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；\n（2） 如果参数是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。\n（3） 如果该参数为未提供或者null ，则对象所有的属性都会被序列化。\n3、space：【可选】第三个参数，美化文本格式，文本添加缩进、空格和换行符，\n（1） 如果 该参数 是一个数字，则返回值文本在每个级别缩进指定数目的空格\n（2） 该参数最大值为10，如果 该参数大于 10，则文本缩进 10 个空格。\n（3）该参数也可以使用非数字，如：\\t。最大值为10",
      "status": true,
      "id": "QM_4BOO4I1vnbqVabBoBf",
      "author": "admin",
      "createTime": 1756436278861
    },
    {
      "title": "嘿嘿",
      "region": "亚洲",
      "content": "嘿嘿",
      "status": false,
      "id": "n_3zAnHsy0b9YJrsa3-Uk",
      "author": "admin",
      "createTime": 1756432621523
    },
    {
      "title": "好好学习",
      "region": "全球",
      "content": "争取考一个好成绩",
      "status": false,
      "id": "UmfMx8SZs050VTvqvzEbH",
      "author": "admin",
      "createTime": 1756431905059
    },
    {
      "title": "测试",
      "region": "亚洲",
      "content": "12321321321",
      "status": false,
      "id": "Ft0HdMpqtqwrdkENLEAvb",
      "author": "admin",
      "createTime": 1756431473888
    },
    {
      "title": "Introducing JSX",
      "categoryId": 2,
      "content": "<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">This funny tag syntax is neither a string nor HTML.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">JSX produces React “elements”. We will explore rendering them to the DOM in the</span> <a href=\"https://reactjs.org/docs/rendering-elements.html\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">next section</span></a><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">. Below, you can find the basics of JSX necessary to get you started.</span></p>\n<h3 style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Why JSX?</span></h3>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Instead of artificially separating</span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><em>technologies</em></span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">by putting markup and logic in separate files, React</span> <a href=\"https://en.wikipedia.org/wiki/Separation_of_concerns\" target=\"_blank\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">separates</span> <span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><em>concerns</em></span></a> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">with loosely coupled units called “components” that contain both. We will come back to components in a</span> <a href=\"https://reactjs.org/docs/components-and-props.html\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">further section</span></a><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">, but if you’re not yet comfortable putting markup in JS,</span> <a href=\"https://www.youtube.com/watch?v=x7cQ3mrcKaY\" target=\"_blank\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">this talk</span></a> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">might convince you otherwise.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React</span> <a href=\"https://reactjs.org/docs/react-without-jsx.html\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">doesn’t require</span></a> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">With that out of the way, let’s get started!</span></p>\n<h3 style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Embedding Expressions in JSX</span></h3>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">In the example below, we declare a variable called</span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>name</code></span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">and then use it inside JSX by wrapping it in curly braces:</span></p>\n<p style=\"text-align:start;\"></p>\n<pre style=\"margin-left:1rem;\"><br>&nbsp;</pre>\n",
      "region": "全球",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 2,
      "createTime": 1615778715619,
      "star": 600,
      "view": 983,
      "id": 3,
      "publishTime": 1615778911762,
      "status": false
    },
    {
      "title": "Rendering Elements",
      "categoryId": 3,
      "content": "<p style=\"text-align:start;\"></p>\n<h2 style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React Only Updates What’s Necessary</span></h2>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">You can verify by inspecting the</span> <a href=\"https://reactjs.org/redirect-to-codepen/rendering-elements/update-rendered-element\" target=\"_blank\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">last example</span></a> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">with the browser tools:</span></p>\n<p style=\"margin-left:0px;\"></p>\n<img src=\"https://reactjs.org/c158617ed7cc0eac8f58330e49e48224/granular-dom-updates.gif\" alt=\"DOM inspector showing granular updates\" style=\"height: ;width: \"/>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Even though we create an element describing the whole UI tree on every tick, only the text node whose contents have changed gets updated by React DOM.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">In our experience, thinking about how the UI should look at any given moment, rather than how to change it over time, eliminates a whole class of bugs.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(109,109,109);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Is this page useful?</span><a href=\"https://github.com/reactjs/reactjs.org/tree/master/content/docs/rendering-elements.md\" target=\"_self\"><span style=\"color: rgb(55,57,64);background-color: transparent;font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Edit this page</span></a>&nbsp;</p>\n",
      "region": "全球",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 3,
      "createTime": 1615778740202,
      "star": 800,
      "view": 869,
      "id": 4,
      "publishTime": 1615778912481
    },
    {
      "title": "Components and Props",
      "categoryId": 4,
      "content": "<p style=\"text-align:start;\"><span style=\"color: rgb(109,109,109);font-size: 18px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a</span> <a href=\"https://reactjs.org/docs/react-component.html\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 18px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">detailed component API reference here</span></a><span style=\"color: rgb(109,109,109);font-size: 18px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.</span></p>\n<h2 style=\"text-align:start;\"><br> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Let’s recap what happens in this example:</span></h2>\n<ol>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">We call</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>ReactDOM.render()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">with the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;Welcome name=\"Sara\" /&gt;</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">element.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React calls the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Welcome</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">component with</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>{name: 'Sara'}</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">as the props.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Our</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Welcome</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">component returns a</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;h1&gt;Hello, Sara&lt;/h1&gt;</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">element as the result.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React DOM efficiently updates the DOM to match</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;h1&gt;Hello, Sara&lt;/h1&gt;</code>.</span></li>\n</ol>\n<blockquote style=\"text-align:start;\"></blockquote>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><strong>Note:</strong></span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Always start component names with a capital letter.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React treats components starting with lowercase letters as DOM tags. For example,</span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;div /&gt;</code></span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">represents an HTML div tag, but</span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;Welcome /&gt;</code></span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">represents a component and requires</span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Welcome</code></span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">to be in scope.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">To learn more about the reasoning behind this convention, please read</span> <a href=\"https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">JSX In Depth</span></a><span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">.</span></p>\n<h2 style=\"text-align:start;\"><br>&nbsp;</h2>\n",
      "region": "全球",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 2,
      "createTime": 1615778777924,
      "star": 100,
      "view": 201,
      "id": 5,
      "publishTime": 1615778914498
    },
    {
      "title": "Thinking in React",
      "categoryId": 6,
      "content": "<p style=\"text-align:start;\"><span style=\"color: rgb(109,109,109);font-size: 18px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">One of the many great parts of React is how it makes you think about apps as you build them. In this document, we’ll walk you through the thought process of building a searchable product data table using React.</span></p>\n<h2 style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Start With A Mock</span></h2>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Imagine that we already have a JSON API and a mock from our designer. The mock looks like this:</span></p>\n<p style=\"text-align:start;\"></p>\n<img src=\"https://reactjs.org/static/1071fbcc9eed01fddc115b41e193ec11/d4770/thinking-in-react-mock.png\" alt=\"Mockup\" style=\"height: 276.854px;width: 228px\"/>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Our JSON API returns some data that looks like this:</span></p>\n<p style=\"margin-left:0px;\"><br> <span style=\"font-size: 17px;\">The first thing you’ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you’re working with a designer, they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!</span></p>\n<p style=\"margin-left:0px;\"><span style=\"font-size: 17px;\">But how do you know what should be its own component? Use the same techniques for deciding if you should create a new function or object. One such technique is the</span> <a href=\"https://en.wikipedia.org/wiki/Single_responsibility_principle\" target=\"_blank\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;\">single responsibility principle</span></a><span style=\"font-size: 17px;\">, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"font-size: 17px;\">Since you’re often displaying a JSON data model to a user, you’ll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That’s because UI and data models tend to adhere to the same</span> <span style=\"font-size: 17px;\"><em>information architecture</em>. Separate your UI into components, where each component matches one piece of your data model.</span></p>\n<p style=\"margin-left:0px;\"></p>\n<img src=\"https://reactjs.org/static/eb8bda25806a89ebdc838813bdfa3601/6b2ea/thinking-in-react-components.png\" alt=\"Component diagram\" style=\"height: 319.521px;width: 275px\"/>\n<p style=\"margin-left:0px;\"><span style=\"font-size: 17px;\">You’ll see here that we have five components in our app. We’ve italicized the data each component represents.</span></p>\n<ol>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code><strong>FilterableProductTable</strong></code></span> <span style=\"color: rgb(26,26,26);font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><strong>(orange):</strong></span> <span style=\"color: rgb(26,26,26);font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">contains the entirety of the example</span><br>&nbsp;</li>\n</ol>\n",
      "region": "亚洲",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 2,
      "createTime": 1615778891518,
      "star": 781,
      "view": 889,
      "id": 8,
      "publishTime": 1615778917615,
      "status": false
    },
    {
      "title": "fdsa",
      "categoryId": 3,
      "content": "<p>fasdfsa</p>\n",
      "region": "亚洲",
      "author": "司马海味",
      "roleId": 3,
      "auditState": 2,
      "publishState": 1,
      "createTime": 1650809874235,
      "star": 0,
      "view": 0,
      "publishTime": 0,
      "id": 10,
      "status": true
    },
    {
      "title": "fafasdf",
      "categoryId": 4,
      "content": "<p>dsafasfdsa</p>\n",
      "region": "亚洲",
      "author": "司马海味",
      "roleId": 3,
      "auditState": 0,
      "publishState": 0,
      "createTime": 1650809894616,
      "star": 0,
      "view": 0,
      "publishTime": 0,
      "id": 11
    },
    {
      "title": "上半年全国传统村落吸引游客近3亿人次",
      "categoryId": 1,
      "content": "<p style=\"text-align:justify;\"><span style=\"color: rgb(13,20,30);background-color: rgb(255,255,255);font-size: 19px;font-family: PingFangSC-Regular, PingFangSC, \"Helvetica Neue\", Helvetica, \"Hiragino Sans GB\", sans-serif;\">这个暑假，位于福建宁德屏南县的国家级传统村落龙潭村人气高涨，不少外地游客专程来这里体验闽东文化。</span></p>\n<p style=\"text-align:justify;\"><span style=\"color: rgb(13,20,30);background-color: rgb(255,255,255);font-size: 19px;font-family: PingFangSC-Regular, PingFangSC, \"Helvetica Neue\", Helvetica, \"Hiragino Sans GB\", sans-serif;\">龙潭村和邻近三个传统村落联手打造的龙潭文化创意产业片区，通过修缮古村民居、整理文化遗存、激活民俗活动、丰富旅游业态，这个假期已经接待游客约29万人次。</span></p>\n<p style=\"text-align:justify;\"><span style=\"color: rgb(13,20,30);background-color: rgb(255,255,255);font-size: 19px;font-family: PingFangSC-Regular, PingFangSC, \"Helvetica Neue\", Helvetica, \"Hiragino Sans GB\", sans-serif;\">不只是福建，今年以来，浙江、山东、湖南等地加大力度推进传统村落集中连片保护利用，引导传统村落联合周边一同整合资源、打造文化品牌，确保每个村落既能彰显个性，又能形成集群效应，构建形成“文化赋能＋产业造血”的可持续发展机制，让一座座传统村落不断焕发新活力。</span></p>\n<p style=\"text-align:justify;\"><span style=\"color: rgb(13,20,30);background-color: rgb(255,255,255);font-size: 19px;font-family: PingFangSC-Regular, PingFangSC, \"Helvetica Neue\", Helvetica, \"Hiragino Sans GB\", sans-serif;\">住房城乡建设部表示，目前我国共有8155个村落列入中国传统村落保护名录并实施了挂牌保护，超过5000个村落列入省级传统村落保护名录。今年1—6月，各地传统村落通过举办非遗展示、文体竞赛等多种文化活动，带动休闲旅游、文化创意等产业加快发展，上半年共吸引游客超过2.93亿人次，带动消费约342.13亿元。</span>&nbsp;</p>\n",
      "region": "全球",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 2,
      "createTime": 1756094165059,
      "star": 0,
      "view": 0,
      "publishTime": 1756094188366,
      "id": 14
    }
  ]
}